<template>
	<div className="table_wrap">
		<table>
			<thead>
				<tr>
					<th></th>

					<th class="row-head" v-for="g in appStore.state.groups">
						{{g.title}}
					</th>
				</tr>
			</thead>
			<tbody>
				<tr :id="'evt-'+idx" class="event-row" v-for="(evt, idx) in appStore.state.events">
					<td class="time-marker">
						{{getTimeLabel(evt)}}
					</td>
					<td v-for="g in appStore.state.groups">
						<event-card v-if="g.id == evt.groupId" :evt="evt" :style="g.styles">

						</event-card>
					</td>
				</tr>

			</tbody>

		</table>

	</div>

	<uni-popup ref="evtShow" type="center" border-radius="10px 10px 0 0">
		<uni-section :title="evtCache.evt.title" type="line" style="width: 60vw;padding: 10px;">
			<view style="font-size: 12px;color: black;">
				<view>
					<b>时间：</b>{{evtCache.evt.timeText}} <b v-if="evtCache.evt.timeSystem">({{evtCache.evt.timeSystem}})</b>
				</view>
				<view>
					<b>详情：</b>
					<view style="text-indent:2em" v-html="getEventContent()" contenteditable="">
						
					</view>
				</view>
				<view v-if="evtCache.evt.link && evtCache.evt.link.length > 0">
					<b>链接：</b>
					<view v-for="url in evtCache.evt.link">
						{{url}}
					</view>
				</view>
			</view>
		</uni-section>
	</uni-popup>
	<head-bar></head-bar>
	<foot-bar></foot-bar>
</template>

<script setup>
	import {
		useAppStore
	} from '@/store/appStore';
	import EventCard from '@/components/event-card/event-card';
	import FootBar from './foot-bar';
	import HeadBar from './head-bar';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		computed,
		ref,
		reactive
	} from 'vue';
	
	import * as Dao from '@/common/dao';

	const evtCache = reactive({
		evt: {}
	})

	const evtShow = ref();

	const appStore = useAppStore();

	const keywords = ref('')

	function getTimeLabel(evt) {
		let time = evt.time;
		const y = parseInt(time / 10000);
		time = time % 10000;
		const m = parseInt(time / 100);
		time = time % 100;
		const d = parseInt(time);

		if (y < 0) {
			return `前 ${(-1*y)}年${m}月${d}日`;
		}
		return `${y}年${m}月${d}日`;
	}

	function viewEvent(evt) {
		evtCache.evt = evt;
		evtShow.value.open()
	}
	
	function getEventContent() {
		const lines = (evtCache.evt.content || '').split('\n');
		return lines.map(ln=>`<p>${ln}</p>`).join('')
	}

	onLoad(opt => {
		setTimeout(() => {
			Dao.uiReady();
		}, 300)

		uni.$on('view-event', viewEvent);
	})

	onUnload(() => {
		uni.$off('view-event', viewEvent);
	})
</script>

<style lang="scss">
	.table_wrap {
		margin: 30px 10px;

		width: calc(100% - 20px);
		height: calc(100vh - 60px);
		overflow: auto;
		background-color: var(--background-color2);
		box-shadow: 0px 0px 3px 3px #000;

		table {
			table-layout: fixed;
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
			font-size: 12px;
		}

		/* 表格th/td样式 */
		td,
		th {
			min-width: 200px;
			width: 200px;
			box-sizing: border-box;
			/*超出长度...*/
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			z-index: 1;
		}

		td {
			border-bottom: 1px dashed #444;
		}


		/* 表头固定 */
		thead tr th {
			position: sticky;
			top: 0;
			background: var(--background-color2);
			height: 30px;
			border-bottom: 1px solid #555;
		}

		/* 首列固定/最后一列固定*/
		th:first-child,
		td:first-child {
			position: sticky;
			left: 0;
			background: var(--background-color2);
			border-right: 1px solid #555;
			text-align: right;
			right: 0px;
			min-width: 90px;
			width: 90px;
			vertical-align: sub;
			z-index: 899;
		}

		/* 表头首列和最后一列强制最顶层 */
		th:first-child {
			z-index: 999;
			/*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
			background: var(--background-color2);
		}


		tr th:nth-child(2n),
		tr td:nth-child(2n) {
			background-color: var(--background-color3);
		}
		
		td.time-marker {
			word-break: break-word;
			white-space: break-spaces;
		}
	}

	table.evt-show {
		
	}
</style>